// 图片懒加载指令注册
import { useIntersectionObserver } from "@vueuse/core";
import  defaultIng  from '@/assets/images/200.png'
import { App } from "vue";

export default {
  install(app: App) {

    // 全局指令
    // lazy ===> 使用v-lazy
    app.directive('lazy', {
      // mounted 是v3 中自定义的指令
      mounted(el: HTMLImageElement, { value }) {

        // 设置默认图
        el.src = defaultIng

        const { stop } = useIntersectionObserver(el, ([{isIntersecting}]) => {
          if(isIntersecting) {
            // 发送qq
            el.src = value 
            // 停止监听 
            stop()
          }
        })
        // el是 img 标签
        // el.onerror  0级dom事件
        // el.onclick=()=>
        // el.addEventListener('click')
        // el.onerror=()=>{  }
        // 加载失败默认图
        // el.addEventListener('error',()=>{
        //   el.src = defaultIng 
        // })
      }
    })
  }
}